<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title th:text="${detailVo.article.title}">文章详细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="" th:content="${detailVo.article.title}">
    <meta name="description" content="" th:content="${detailVo.article.articleDes}">
    <link rel="stylesheet" href="../../static/editor/css/editormd.preview.css"
          th:href="@{${rootPath} + '/static/editor/css/editormd.preview.css'}"/>
    <th:block th:include="common/link::link"></th:block>
    <link href="https://cdn.bootcss.com/KaTeX/0.9.0-beta/katex.min.css" rel="stylesheet">
</head>
<body>
<style>
    #sidebar {
        width: 400px;
        height: 100%;
        position: fixed;
        overflow: hidden;
        background: #fff;
        z-index: 100;
        border: 1px solid #ddd;
        border-top: none;
        border-bottom: none;
    }

    #sidebar:hover {
        overflow: auto;
    }

    #sidebar h2 {
        font-size: 16px;
    }

    .markdown-body ul li{
        list-style: disc;
    }
    .markdown-body ol li{
        list-style: decimal;
    }
</style>

<div class="header">
    <th:block th:include="common/header::header"></th:block>
</div>

<div class="main layui-clear">
    <div class="wrap">
        <div class="content detail">
            <div class="fly-panel detail-box">
                <h1 th:text="${detailVo.article.title}">文章标题</h1>
                <div class="detail-about">
                    <a class="jie-user" href="">
                        <img src="../../../static/images/avatar/default.png" th:src="${detailVo.user.avatar}">
                        <cite>
                            <i th:text="${detailVo.user.nickName}">纸飞机</i>
                            <em th:text="'('+${fame.fameName}+')'">(金牌会员)</em>
                            <em style="color:#5FB878" id="pub-time">1分钟前发布</em>
                            <!-- <em style="color:#FF9E3F">（活雷锋）</em>
                             <em style="color:#999">（该号已被封）</em> -->
                        </cite>
                    </a>
                    <div class="detail-hits">
                        <span class="iconfont" th:text="'阅读 ' +${detailVo.article.viewNum}">阅读 200</span>
                        <span class="iconfont" th:text="'评论 ' +${detailVo.article.commentNum}">评论 200</span>
                        <span class="iconfont" th:text="'喜欢 ' +${detailVo.article.likeNum}">喜欢 200</span>
                        <th:block th:if="${isCollection == 0}">
                            <span class="layui-btn layui-btn-xs jie-admin "
                                  th:onclick="'javascript:collectionFn(\''+${detailVo.article.articleId}+'\')'">收藏</span>
                        </th:block>
                        <th:block th:unless="${isCollection == 0}">
                            <span class="layui-btn layui-btn-xs jie-admin">已收藏</span>
                        </th:block>
                        <th:block th:if="${not #lists.isEmpty(detailVo.article.original)}">
                            <a th:href="${detailVo.article.original}" target="_blank">
                                <span class="layui-btn layui-btn-xs layui-btn-normal">阅读原文</span>
                            </a>
                        </th:block>
                        <th:block th:unless="${not #lists.isEmpty(detailVo.article.original)}">
                            <span class="layui-btn layui-btn-xs layui-btn-normal">原创</span>
                        </th:block>

                    </div>
                </div>

                <div class="detail-body photos" style="margin-bottom: 20px;">
                    <div id="layout">
                        <div id="test-editormd-view">
                            <textarea style="display:none;" id="md-content" th:text="${detailVo.article.mdContent}"
                                      name="test-editormd-markdown-doc">###Hello world!</textarea>
                        </div>
                    </div>
                    <script src="../../static/editor/js/jquery.min.js"
                            th:src="@{${rootPath} + '/static/editor/js/jquery.min.js'}"></script>
                    <script src="../../static/editor/lib/marked.min.js"
                            th:src="@{${rootPath} + '/static/editor/lib/marked.min.js'}"></script>
                    <script src="../../static/editor/lib/prettify.min.js"
                            th:src="@{${rootPath} + '/static/editor/lib/prettify.min.js'}"></script>

                    <script src="../../static/editor/lib/raphael.min.js"
                            th:src="@{${rootPath} + '/static/editor/lib/raphael.min.js'}"></script>
                    <script src="../../static/editor/lib/underscore.min.js"
                            th:src="@{${rootPath} + '/static/editor/lib/underscore.min.js'}"></script>
                    <script src="../../static/editor/lib/sequence-diagram.min.js"
                            th:src="@{${rootPath} + '/static/editor/lib/sequence-diagram.min.js'}"></script>
                    <script src="../../static/editor/lib/flowchart.min.js"
                            th:src="@{${rootPath} + '/static/editor/lib/flowchart.min.js'}"></script>
                    <script src="../../static/editor/lib/jquery.flowchart.min.js"
                            th:src="@{${rootPath} + '/static/editor/lib/jquery.flowchart.min.js'}"></script>

                    <script src="../../static/editor/js/editormd.js"
                            th:src="@{${rootPath} + '/static/editor/js/editormd.js'}"></script>
                    <script type="text/javascript">
                        $(function () {
                            var testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                                markdown: $("#md-content").text(),//+ "\r\n" + $("#md-content").text(),
                                //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                                htmlDecode: "style,script,iframe",  // you can filter tags decode
                                //toc             : false,
                                tocm: true,    // Using [TOCM]
                                tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                                //gfm             : false,
                                //tocDropdown     : true,
                                // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                                emoji: true,
                                taskList: true,
                                tex: true,  // 默认不解析
                                flowChart: true,  // 默认不解析
                                sequenceDiagram: true,  // 默认不解析
                            });
                        });
                    </script>

                </div>
                <hr>
                <div>
                    <center><p th:text="${detailVo.user.supportWord}">赞赏语</p></center>
                    <center>
                        <button onclick="showQrcode()" class="layui-btn layui-btn-normal layui-btn-radius">赞赏支持</button>
                    </center>
                </div>
                <hr>
                <div>
                    <center>
                        <button id="user-like"
                                th:class="${isLike} == false ? 'layui-btn layui-btn-primary layui-btn-radius' : 'layui-btn layui-btn-danger layui-btn-radius'"
                                onclick="doLike()">
                            <i class="fa fa-thumbs-o-up fa-fw" title="喜欢"></i>喜欢
                        </button>

                        <button class="layui-btn layui-btn-warm layui-btn-radius" id="report">
                            <i class="fa fa-exclamation-circle fa-fw" title="回答"></i>举报
                        </button>
                    </center>
                </div>

            </div>

            <div class="fly-panel detail-box" style="padding-top: 0;">

                <fieldset class="layui-elem-field layui-field-title">
                    <legend>评论区</legend>
                </fieldset>
                <div id="comment-area">

                    <th:block th:if="${not #lists.isEmpty(commentList)}">
                        <th:block th:each="comment,index:${commentList}">
                            <div class="layui-collapse" lay-accordion="">
                                <div class="layui-colla-item">
                                    <div class="layui-colla-title">
                                        <div style="float:left; text-align:left" class="comment-user">
                                            <img style="width: 40px;height: 40px;border-radius: 100%"
                                                 th:src="${comment.ucenterUser.avatar}"/>
                                            <a th:href="@{${rootPath} + '/user/'+${comment.ucenterUser.userId}}"
                                               target="_blank"
                                               th:text="${comment.ucenterUser.nickName}">flyhero</a>
                                            <input type="hidden" th:value="${comment.ucenterUser.userId}"/>
                                        </div>
                                        <div style="float:right; text-align:right">
                                            <span class="layui-badge layui-bg-gray"
                                                  th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm')}">2017-06-22 14:30:49</span>
                                        </div>
                                    </div>

                                    <div class="layui-colla-content layui-show">
                                        <p th:text="${comment.content}"></p>
                                        <th:block th:if="${not #lists.isEmpty(comment.cmsReplyList)}">
                                            <th:block th:each="reply,index:${comment.cmsReplyList}">
                                                <div class="layui-collapse" lay-accordion="">
                                                    <div class="layui-colla-item">
                                                        <div class="layui-colla-title">
                                                            <div style="float:left; text-align:left">
                                                                <img style="width: 40px;height: 40px; border-radius: 100%"
                                                                     th:src="${reply.fromUser.avatar}"
                                                                     src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"/>
                                                                <a th:href="@{${rootPath} + '/user/'+${reply.fromUserId}}"
                                                                   target="_blank"
                                                                   th:text="${reply.fromUser.nickName}">flyhero</a>
                                                            </div>
                                                            <div style="float:right; text-align:right">
                                                                <span class="layui-badge layui-bg-gray"
                                                                      th:text="${#dates.format(reply.createTime, 'yyyy-MM-dd HH:mm')}">2017-06-22 14:30:49</span>
                                                            </div>
                                                        </div>
                                                        <div class="layui-colla-content layui-show">
                                                            <p th:text="${reply.content}"></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </th:block>
                                        </th:block>

                                        <div class="comment-reply" style="text-align: right; padding-top: 8px">
                                            <a type="reply" style="cursor: pointer;"
                                               th:onclick="'javascript:replyFn(\''+${comment.ucenterUser.nickName}+'\',\''+${comment.commentId}+'\')'">
                                                回复
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th:block>
                    </th:block>

                </div>
            </div>
            <div class="layui-form layui-form-pane">
                <form>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">神评论：</label>
                        <div class="layui-input-block">
                            <textarea id="L_content" name="content" required lay-verify="required"
                                      class="layui-textarea fly-editor"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <input type="hidden" name="articleId" value="0" th:value="${detailVo.article.articleId}">
                        <input type="hidden" name="authorId" value="0" th:value="${detailVo.user.userId}">
                        <input type="hidden" name="commentId" id="commentId" value="0">
                        <button class="layui-btn" lay-filter="pub-comment" lay-submit>提交回答</button>
                    </div>

                </form>
            </div>
        </div>
    </div>


    <div class="edge">
        <div id="sidebar">
            <center><h1>目录</h1></center>
            <div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
        </div>
    </div>

</div>

<script th:inline="javascript">
    var user = [[${session.user}]];
    var targetId = '[[${detailVo.article.articleId}]]';

    //点赞功能
    function doLike() {
        if (user == null || user == "") {
            layer.msg("请登录");
            return false;
        }

        $.post("../../article/" + targetId + "/like", {}, function (result) {
            if (result.success) {
                if (result.data) {
                    $("#user-like").removeClass("layui-btn-primary").addClass("layui-btn-danger");
                } else {
                    $("#user-like").removeClass("layui-btn-danger").addClass("layui-btn-primary");
                }
            } else {
                layer.msg(result.msg);
            }
        }, "json");
    }

    var gather = {}, dom = {
        content: $('#L_content')
    };

    function replyFn(nickName, commentId) {
        if (user == null || user == "") {
            layer.msg("请登录");
            return false;
        }

        dom.content.focus();
        var val = dom.content.val();
        var aite = '@' + nickName;
        if (val.indexOf(aite) !== -1) return;
        dom.content.val(aite + ' ' + val);
        $("#commentId").val(commentId);
        return false;
    }

    var t = timeAgo(getMyDate([[${detailVo.article.createTime}]]));
    $("#pub-time").text(t);

    //显示赞赏二维码
    var qrcode = [[${detailVo.user.supportQrcode}]];

    function showQrcode() {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            // area: '300px',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img src="' + qrcode + '" alt="谢谢赞赏">'
        });
    }

    function collectionFn(articleId) {
        if (user == null || user == "") {
            layer.msg("请登录");
            return false;
        }
        $.post("../../article/collection", {"articleId": articleId}, function (result) {
            if (result.success) {
                layer.msg("收藏成功");
            }

        }, "json");
    }

    layui.use(['util', 'element', 'form', 'layer', 'laypage'], function () {
        var util = layui.util;
        var form = layui.form;  //表单的依赖
        var layer = layui.layer;
        var laypage = layui.laypage;//分页的依赖
        var element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块

        form.on('submit(pub-comment)', function (data) {
            if (user == null || user == "") {
                layer.msg("请登录");
                return false;
            }
            var val = data.field.content;
            if (val.indexOf('@') !== -1) {
                //nothing
            } else {
                data.field.commentId = 0;
            }

            $.post("../../comment", data.field, function (result) {
                console.log(result.code);
                layer.msg(result.msg);
            }, "json");
            return false;
        });

        //右下角bar top
        util.fixbar({
            bar1: true,
            click: function (type) {
                console.log(type);
                if (type === 'bar1') {

                }
            }
        })

        //举报
        $('#report').click(function () {
            var index = layer.open({
                title: '举报',
                type: 1,
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 1, //不显示关闭按钮
                anim: 2,
                shadeClose: true, //开启遮罩关闭
                content: '\n' +
                '<form class="layui-form" action="">\n' +
                '  <div class="layui-form-item">\n' +
                '    <label class="layui-form-label" style="width: 30px">类型</label>\n' +
                '    <div class="layui-input-block" style="margin-left:68px">\n' +
                '      <input type="radio" name="reportReason" value="1" title="抄袭侵权" checked="">\n' +
                '      <input type="radio" name="reportReason" value="2" title="色情词汇">\n' +
                '      <input type="radio" name="reportReason" value="3" title="政治倾向">\n' +
                '      <input type="radio" name="reportReason" value="4" title="偏激言辞">\n' +
                '    </div>\n' +
                '  </div>\n' +
                '  <div class="layui-form-item layui-form-text">\n' +
                '    <label class="layui-form-label" style="width: 30px">备注</label>\n' +
                '    <div class="layui-input-block" style="margin-left:68px">\n' +
                '      <input id="remarks" type="text" name="remarks" lay-verify="title" autocomplete="off" placeholder="抄袭网址或关键词" class="layui-input">' +
                '    </div>\n' +
                '  </div>\n' +
                '<input type="hidden" name="targetId" value="' + targetId + '">' +
                '<input type="hidden" name="reportType" value="1">' +
                '  <div class="layui-form-item">\n' +
                '    <div class="layui-input-block" style="margin-left:68px">\n' +
                '      <button class="layui-btn" lay-submit="" lay-filter="pub-report">立即提交</button>\n' +
                '    </div>\n' +
                '  </div>\n' +
                '</form>\n',
            });
            form.render('radio'); //刷新select选择框渲染
            form.on('submit(pub-report)', function (data) {
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.post("../../report/article", data.field, function (result) {
                    console.log(result.code);
                    layer.msg(result.msg);
                }, "json");
                layer.close(index);
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

        });
    });


    /*
        var id ="[[${detailVo.article.articleId}]]";
        layui.use('flow', function () {
            var flow = layui.flow;
            var pageCount;

            flow.load({
                elem: '#comment-area', //流加载容器
                scrollElem: '#comment-area', //滚动条所在元素，一般不用填，此处只是演示需要。
                isAuto: false,
                isLazyimg: true,
                done: function (page, next) { //加载下一页

                    //模拟插入
                    setTimeout(function () {
                        var lis = [];
                        $.ajax({
                            type: 'GET',
                            url: "../../comment/"+id,
                            dataType: "json",
                            data: {
                                "pageNum": page,
                                "pageSize": 6
                            },
                            success: function (result) {

                                pageCount = result.data.pages;

                                $.each(result.data.list, function (index, comment) {
                                    lis.push('            <div class="layui-collapse"  lay-accordion="">\n' +
                                        '                    <div class="layui-colla-item">\n' +
                                        '                        <div class="layui-colla-title">\n' +
                                        '                            <div style="float:left; text-align:left" class="comment-user">\n' +
                                        '                                <img style="width: 40px;height: 40px;"\n' +
                                        '                                     src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">\n' +
                                        '                                <a href="../add-subject.html" target="_blank">flyhero</a>\n' +
                                        '                                <input type="hidden" value=""/>\n' +
                                        '                            </div>\n' +
                                        '                            <div style="float:right; text-align:right"><span class="layui-badge layui-bg-gray">2017-06-22 14:30:49</span>\n' +
                                        '                            </div>\n' +
                                        '                        </div>\n' +
                                        '                        <div class="layui-colla-content layui-show">'+comment.content);
                                    $.each(comment.cmsReplyList,function(index,reply){
                                        lis.push('                            <div class="layui-collapse" lay-accordion="">\n' +
                                            '                                <div class="layui-colla-item">\n' +
                                            '                                    <div class="layui-colla-title">\n' +
                                            '                                        <div style="float:left; text-align:left">\n' +
                                            '                                            <img style="width: 40px;height: 40px;"\n' +
                                            '                                                 src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">\n' +
                                            '                                            <a>法师</a>\n' +
                                            '                                        </div>\n' +
                                            '                                        <div style="float:right; text-align:right"><span\n' +
                                            '                                                class="layui-badge layui-bg-gray">2017-06-22 14:30:49</span></div>\n' +
                                            '                                    </div>\n' +
                                            '                                    <div class="layui-colla-content layui-show">' +reply.content+
                                            '                                    </div>\n' +
                                            '                                </div>\n' +
                                            '                            </div>');
                                    });

                                    lis.push('                            <div class="comment-reply" style="text-align: right; padding-top: 8px">\n' +
                                        '                                <!--<a href="javascript:void(0);" id="re_test">回复</a>-->\n' +
                                        '                                <span type="reply">\n' +
                                        '                                  回复\n' +
                                        '                                </span>\n' +
                                        '                            </div>\n' +
                                        '                        </div>\n' +
                                        '                    </div>\n' +
                                        '                </div>');

                                    next(lis.join(''), page < pageCount);
                                    lis = [];
                                });

                            }

                        });

                        //alert("hou"+lis)
                        // next(lis.join(''), page < pageCount); //假设总页数为 6


                    }, 500);
                }
            });

        });*/


</script>
</body>
</html>